@extends('admin.layouts.head')

@section('content')
    <body>
    <div id="app">
        <div class="wrapper -header-fixed">

        @include('admin.layouts.navbar')
        @include('admin.layouts.sidebar')

        <!-- 内容页开始-->
            <div class="content-container">
                <div class="container-fluid">
                    <div class="page-content">

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">仪表盘</a></li>
                                <li class="breadcrumb-item active" aria-current="page">异常信息</li>
                            </ol>
                        </nav>
                        @verbatim
                            <div class="card">
                                <div class="card-body">

                                    <div id="vueApp">
                                        <div class="content-box">

                                            <div class="op-bar" style="margin: 16px 0;">
                                                unionid：
                                                <el-input v-model="queryForm.union_id" placeholder="请输入uniond" style="width: 200px"></el-input>

                                                版本：
                                                <el-input v-model="queryForm.game_data" placeholder="请输入" style="width: 200px"></el-input>

                                                <el-button type="primary" @click="search">搜索</el-button>

                                            </div>

                                            <el-table
                                                :data="statisticList"
                                                border
                                                size="mini"
                                                style="width: 100%">
                                                <el-table-column
                                                    prop="game_data"
                                                    label="版本"
                                                >
                                                </el-table-column>
                                                <el-table-column
                                                    prop="unionid"
                                                    label="unionid"
                                                >
                                                </el-table-column>
                                                <el-table-column
                                                    prop="wf_balance"
                                                    label="积分"
                                                >
                                                </el-table-column>
                                                <el-table-column
                                                    prop="create_time"
                                                    label="时间"
                                                >
                                                </el-table-column>

                                                <!--<el-table-column
                                                    label="操作"
                                                    width="180"
                                                >
                                                    <template slot-scope="scope">

                                                    </template>
                                                </el-table-column>-->
                                            </el-table>

                                            <el-pagination
                                                style="margin-top: 20px"
                                                background
                                                layout="prev, pager, next"
                                                @current-change="pageChange"
                                                :current-page="curPage"
                                                :page-count="totalPage">
                                            </el-pagination>


                                        </div>

                                    </div> <!-- .card-body -->
                                </div> <!-- .card -->
                                @endverbatim
                            </div> <!-- .page-content -->
                    </div> <!-- .container-fluid -->
                </div> <!-- .content-container -->
            </div> <!-- .wrapper -->
        </div> <!-- #app -->

        @include('admin.layouts.vuehead')

        <script>
            const vueApp = new Vue({
                el: '#vueApp',
                data() {
                    return {
                        statisticList: [],
                        queryForm: {
                            page: 1,
                            page_size: 10,
                            union_id: '',
                            game_data: '',
                        },
                        totalPage: 0,
                        curPage: 0,
                    }
                },
                mounted() {
                    this.getList()
                },
                watch: {

                },
                methods: {
                    getList() {
                        adminApi_getAbnormalExtract(this.queryForm).then(res => {
                            this.statisticList = res.data.data
                            this.totalPage = res.data.last_page
                            this.curPage = res.data.current_page
                        })
                    },
                    pageChange(p) {
                        this.queryForm.page = p
                        this.getList()
                    },
                    search() {
                        this.queryForm.page = 1
                        this.getList()
                    }
                },
            })
        </script>
    </body>


    <style>

    </style>
@endsection
